<template>
  <div
    v-loading="loading"
    class="details"
  >
    <RecordBlock
      :descriptions="detailsFormat"
      :status="status"
    />
  </div>
</template>
<script>
import { getKilometerRegisterDetail } from '@/api/kilometerRegister'
import RecordBlock from '@/views/approvalFlow/components/approvalRecordDetails/RecordBlock.vue'

export default {
  name: 'KilometerRegisterDetail',
  components: { RecordBlock },
  props: {
    recordId: {
      type: Number,
      default: null
    },
    status: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      details: null,
      loading: false
    }
  },
  computed: {
    stateType() {
      const stateMap = {
        1: 'success',
        0: 'danger',
        2: 'info'
      }
      return stateMap[this.details?.state] || 'warning'
    },

    detailsFormat() {
      const blocks = []
      const data = this.details

      if (!data) return blocks

      blocks.push({
        title: '报销信息',
        blocks: [
          {
            label: '报销原因',
            value: data?.reason ?? '-'
          },
          {
            label: '开始公里数',
            value: data?.start_kilometer + 'KM'
          },
          {
            label: '开始公里数（图片）',
            img: data?.start_kilometer_img
          },
          {
            label: '结束公里数',
            value: data?.end_kilometer + 'KM'
          },
          {
            label: '结束公里数（图片）',
            img: data?.end_kilometer_img
          },
          {
            label: '本次总里程',
            value: data?.end_kilometer - data?.start_kilometer + 'KM'
          }
        ]
      })

      const statusMap = {
        0: '审核失败',
        1: '审核成功',
        2: '已撤销'
      }

      blocks.push({
        title: '审核信息',
        blocks: [
          {
            label: '审核状态',
            value: statusMap[data.state] ?? '待审核',
            tag: this.stateType
          }
        ]
      })

      blocks.push({
        title: '申请人',
        blocks: [
          {
            label: '申请人姓名',
            value: data?.user?.username ?? '-'
          },
          {
            label: '联系方式',
            value: data?.user?.phone ?? '-'
          }
        ]
      })

      return blocks
    }
  },
  created() {
    this.getDetails()
  },
  methods: {
    async getDetails() {
      this.loading = true
      try {
        const res = await getKilometerRegisterDetail(this.recordId)
        this.details = res.data
      } catch (error) {
        this.$message.error(error?.response?.data?.message || '信息获取失败')
      } finally {
        await this.sleep(500)
        this.loading = false
      }
    },

    sleep(t) {
      return new Promise(r => setTimeout(r, t))
    }
  }
}
</script>
<style lang="scss" scoped>
.details {
  min-height: 300px;
}
</style>
